<template>
    <div>
        <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-注册</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    
</head>
<body>
<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="../../static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="/login.html">登录</a>
        </div>
        <div class="reg_form clearfix" id="app" v-cloak>
            <form @submit.prevent="on_submit">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" v-model="username" name="user_name" id="user_name">
                        <!-- <span v-show="error_name" class="error_tip">请输入5-20个字符的用户</span> -->
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" v-model="password" name="pwd" id="pwd">
                        <!-- <span v-show="error_password" class="error_tip">密码最少8位，最长20位</span> -->
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" v-model="password2" name="cpwd" id="cpwd">
                        <!-- <span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span> -->
                    </li>
                    <li>
                        <label>手机号:</label>
                        <input type="text" name="phone" v-model="mobile" id="phone">
                        <!-- <span v-show="error_phone" class="error_tip">您输入的手机号格式不正确</span> -->
                    </li>
                    <li>
                        <label>图片验证:</label>  
                              <input type="text" v-model="sms_code" id="msg_code" class="msg_input">
                              <img :src="'http://127.0.0.1:8000/users/generate_image_code/' + uuid_+'/'" alt="加载失败"  @click="new_uuid()">
                        <!-- <input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
                        <img src="'http://127.0.0.1:8000/users/generate_image_code/ + uuid_+'/'" alt="加载失败" @click="new_uuid()"> -->
                    </li>
                    <li class="agreement">
                        <input type="checkbox" v-model="allow" name="allow" id="allow" checked="checked">
                        <label>同意”美多商城用户使用协议“</label>
                        <!-- <span v-show="error_allow" class="error_tip2">请勾选同意</span> -->
                    </li>
                    <li class="reg_sub">
                        <input type="button" value="注 册" @click="zhuce()">
                    </li>
                </ul>
            </form>
        </div>

    </div>

</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

</body>
    </div>    
</template>

<script>
import axios from "axios"
export default {
    name:"register",
    data() {
        return {
             uuid:'', 
             username:"",
             password:"",
             password2:"",
             mobile:"",
             sms_code:"",
             allow:"",
             is_ok:false
        }
    },
    created() {
        this.uuid_= this.generate_uuid
    },
    methods: {
        generate_uuid: function() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                /[xy]/g,
                function(c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
                }
            );
            return uuid;
        },
        new_uuid(){
            console.log(111111111)
            this.uuid_ = this. generate_uuid()
        
        },
        check_code(){
                var formdata = new FormData()
                formdata.append("uuid_",this.uuid_)
                formdata.append("sms_code",this.sms_code)

                axios({
                    url:"http://127.0.0.1:8000/users/check/",
                    method:"post",
                    data:formdata
                }).then(res=>{
                    console.log(res.data)
                     if(res.data.code ==200){
                        this.is_ok=true
                    }else{
                        this.is_ok=false
                }
                })
            },
        regist_info(){
            if(this.is_ok=true){
                
            }else{
                alert("你的验证码错误，请填写正确")
            }
        } ,
        zhuce(){
            let form_data = new FormData()
            form_data.append("username",this.username)
            form_data.append("password",this.password)
            form_data.append("password2",this.password2)
            form_data.append("phone",this.mobile)

            axios({
                url:"http://127.0.0.1:8000/users/register/",
                method:"post",
                data:form_data                
            }).then(res=>{
                console.log(res.data.msg)
                this.$router.push({name:"login"})
            })
        }


},
  
   
}
</script>